<template>
  <div>
    <dialogDiy
      ref="dialogDiyRef"
      title="用户详情"
      :fullscreenDis="false"
      DialogWidth="700px"
      :headerStyle="'padding-bottom: 10px;borderBottom:1px solid #e6e6e6;'"
    >
      <div class="user-box">
        <div class="row-flex">
          <div class="row-left">头像：</div>
          <div>
            <el-image
              style="width: 60px; height: 60px"
              :src="userInfo1.icon"
            ></el-image>
          </div>
        </div>
        <div class="row-flex">
          <div class="row-left">昵称：</div>
          <div>
            {{ userInfo1.nickname }}
          </div>
        </div>
        <div class="row-flex">
          <div class="row-left">真实姓名：</div>
          <div>
            {{ userInfo1.realname }}
          </div>
        </div>
        <div class="row-flex">
          <div class="row-left">身份证号码：</div>
          <div>
            {{ userInfo1.cardId }}
          </div>
        </div>
        <div class="row-flex">
          <div class="row-left">会员类型：</div>
          <div>
            {{ userInfo1.type?getDicLabel(typeList, userInfo1.type):"" }}
          </div>
        </div>
        <div class="row-flex">
          <div class="row-left">性别：</div>
          <div>
            {{ userInfo1.gender | sexFilter }}
          </div>
        </div>
        <div class="row-flex">
          <div class="row-left">状态：</div>
          <div>
            {{ userInfo1.status == "1" ? "正常" : "禁用" }}
          </div>
        </div>
        <div class="row-flex">
          <div class="row-left">备注：</div>
          <div>
            {{ userInfo1.note }}
          </div>
        </div>
      </div>
    </dialogDiy>
  </div>
</template>

<script>
import dialogDiy from "@/components/dialogDiy";
export default {
  filters: {
    sexFilter(value) {
      const sexMap = {
        0: "未知",
        1: "男",
        2: "女",
      };
      return sexMap[value];
    },
  },
  props: {
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    dialogDiy,
  },
  watch: {
    userInfo(val) {
      this.userInfo1 = val;
    },
  },
  data() {
    return {
      userInfo1: {},
      typeList:[]
    };
  },
  async mounted() {
    let typeList = await this.$getDictData("account_type");
    this.typeList = typeList;
  },
  methods: {
    getDicLabel(arr, value) {
      let item = arr.find((item) => {
        return item.dictValue == value;
      });
      return item.dictLabel;
    },
    opendialog(row) {
      console.log(row);
      this.$refs.dialogDiyRef.openlog(row);
    },
  },
};
</script>

<style scoped lang="scss">
.row-flex {
  display: flex;
  align-content: baseline;
  margin-bottom: 20px;
}
/deep/ .el-dialog__body {
  padding: 0 20px 20px;
}
/deep/ .el-col-4 {
  text-align: center;
}
.user-box {
  margin-top: 20px;
  .row-left {
    min-width: 100px;
    text-align: right;
    margin-right: 0px;
  }
}
</style>
